<template>
	<view class="container">
		<view class="item flex space-between">
			<view class=""> 导出方式</view>
			<view class="flex align-center height100" @click="mode">
				<text class="lineHeight1 fsize28">{{mode1}}</text>
				<uni-icons type="forward" size="20"></uni-icons>
			</view>
		</view>
		<view class="dataitem flex space-between mgt-20" v-if="mode1=='指定日期'">
			<view class=""> 开始日期 </view>
			<uni-datetime-picker v-model="startDate">{{startDate}}</uni-datetime-picker>
		</view>
		<view class="dataitem flex space-between" v-if="mode1=='指定日期'">
			<view class=""> 结束日期 </view>
			<uni-datetime-picker v-model=" endDate">{{endDate}}</uni-datetime-picker>
		</view>

		<view class="item flex space-between mgt-20">
			<view class=""> 导出范围</view>
			<view class="flex align-center height100" @click="range">
				<text class="lineHeight1 fsize28">{{range1}}</text>
				<uni-icons type="forward" size="20"></uni-icons>
			</view>
		</view>

		<view class="item flex space-between mgt-20" v-if="range1=='当前签到'">
			<view class="flex"> <text class="mgr-2">导出分组</text>
				<uni-icons type="help" size="20" color="#1e90ff" @click="showModel"></uni-icons>
			</view>
			<view class="flex align-center height100" @click="group">
				<text class="lineHeight1 fsize28 mgr-2">{{group1}}</text>
				<uni-icons type="forward" size="20"></uni-icons>
			</view>
		</view>
		<view class="item flex space-between mgt-20">
			<view class="flex"> <text class="mgr-2">导出ID</text>
				<uni-icons type="help" size="20" color="#1e90ff" @click="showModel2"></uni-icons>
			</view>
			<view class="flex align-center height100" @click="id">
				<text class="lineHeight1 fsize28">{{ID1}}</text>
				<uni-icons type="forward" size="20"></uni-icons>
			</view>
		</view>

		<view class="button box" @click="exportBtn">
			导出
		</view>
		<view class="exportBox  mgt-20 flex">
			<view class="box" @click="exportCourse">
				<view class="text">
					<text class="text1">导出教程</text>
					<text class="text2">点击查看></text>
				</view>
				<view class="cover">
					<image src="/static/images/signIn/download.png" mode=""></image>
				</view>
			</view>
			<view class="box" @click="exportExplain1">
				<view class="text">
					<text class="text1">导出说明</text>
					<text class="text2">帮助中心></text>
				</view>
				<view class="cover">
					<image src="/static/images/signIn/info.png" mode=""></image>
				</view>
			</view>
		</view>

		<view class="float-box" v-if="ismode">
			<view class="box-item" @click="mode1='导出全部';ismode=false ">
				导出全部
			</view>
			<view class="box-item bordertop" @click="mode1='指定日期' ;ismode=false">
				指定日期
			</view>
			<view class=" box-item cancel mgt-20" @click="ismode=false">
				取消
			</view>
		</view>

		<view class="float-box" v-if="isrange">
			<view class="box-item" @click="range1='当前签到';isrange=false">
				当前签到
			</view>
			<view class="box-item bordertop" @click="range1='全部创建';isrange=false">
				全部创建
			</view>
			<view class=" box-item cancel mgt-20" @click="isrange=false">
				取消
			</view>
		</view>

		<view class="float-box" v-if="isgroup">
			<view class="box-item" @click="group1='默认不分组';isgroup=false">
				默认不分组
			</view>
			<view class="box-item bordertop" @click="group1='按日期分组';isgroup=false">
				按日期分组
			</view>
			<view class=" box-item cancel mgt-20" @click="isgroup=false">
				取消
			</view>
		</view>
		<view class="float-box" v-if="isID">
			<view class="box-item" @click="ID1='否';isID=false">
				否
			</view>
			<view class="box-item bordertop" @click="ID1='是';isID=false">
				是
			</view>
			<view class=" box-item cancel mgt-20" @click="isID=false">
				取消
			</view>
		</view>

		<view class="mask" @click="mask" v-if="ismode || isrange || isgroup || isID"></view>
		<!-- 提示窗示例 -->
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog type="success" cancelText="复制地址" confirmText="查看文件" title="请选择导出类型"
				content="温馨提示如果小程序中查看文件提示异常，请复制文件地址到浏览器中查看与下载" @confirm="dialogConfirm" @close="dialogClose">
			</uni-popup-dialog>
		</uni-popup>
		<!-- <mask-model ref="showMask" btnType="1" @confirm="confirm" @cancel="cancel" titleColoe="#666666"
			cancelColor="#666666" confirmColor="#007AFF" maskTitle="默认不分组，开启分组导出excel时将会按照设定的分组条件生成独立表格"></mask-model>
	 -->
		<mask-model ref="showMask2" btnType="1" @confirm="confirm" @cancel="cancel" titleColoe="#666666"
			cancelColor="#666666" confirmColor="#007AFF" maskTitle="开启导出ID以后，excel导出时会插入账号唯一ID, 在更多页面登录以后可以查看每个账号的ID">
		</mask-model>
		<mask-model ref="showMask" maskTitle="默认不分组，开启分组导出excel时将会按照设定的分组条件生成独立表格"></mask-model>

	</view>
</template>

<script>
	import {
		signExport,
	} from '@/api/activity.js';

	import maskModel from '../../components/mask-model/mask-model.vue'
	import Vue from 'vue'
	export default {
		components: {
			maskModel: maskModel,
		},
		data() {
			return {
				mode1: "导出全部",
				range1: "当前签到",
				group1: "默认不分组",
				ID1: "否",
				ismode: false,
				isrange: false,
				isgroup: false,
				isID: false,
				startDate: "", //开始日期
				endDate: "", //结束日期
				code: "",
				// exporttips: false,
				exportlink: "",
				istip: false,
				tipcontent: "",
				maskTitle: '提示语'
			}
		},
		onLoad(options) {
			let datamap = new Date().getTime();
			console.log('时间戳', datamap)
			this.startDate = this.timestampToTime(datamap) + '00:00:00';
			this.endDate = this.timestampToTime(datamap) + '23:59:59';
			this.code = options.code
		},

		methods: {
			confirm: function(e) { //确定按钮
				console.log('您点击了确定按钮');
			},
			cancel: function() { //取消按钮
				console.log('您点击了取消按钮');
			},
			showModel: function(e) { //打开询问弹窗
				this.$refs.showMask.show();
			},
			showModel2: function(e) { //打开询问弹窗
				this.$refs.showMask2.show();
			},

			// 保存文件
			dialogConfirm() {
				Vue.prototype.$uniApi.saveFile(this.exportlink);
			},
			// 复制地址
			dialogClose() {
				uni.setClipboardData({
					data: this.exportlink,
					success: function() {
						console.log('success');
					}
				});
			},
			// 导出教程
			exportCourse() {
				uni.navigateTo({
					url: "export-course"
				})

			},

			// 导出说明
			exportExplain1() {
				uni.navigateTo({
					url: "../me/help"
				})
			},
			// 导出分组
			exportgroup() {
				this.istip = true
				this.tipcontent = "分组的内容分组的内容分组的内容分组的内容分组的内容分组的内容"
			},
			exportBtn() {

				if (this.startDate >= this.endDate) {
					uni.showToast({
						title: '日期设置错误',
						duration: 2000,
						icon:'none'
					})
				} else {
					if (this.mode1 == '指定日期') {
						console.log(this.range1);
						console.log(this.group1);
						signExport({
							data: {
								mode: this.range1 == '当前签到' && this.group1 == '按日期分组' ? 3 : this.range1 == '当前签到' ?
									1 : this.range1 == '全部创建' ? 2 : 'error',
								code: this.code,
								type: this.mode1 == '导出全部' ? 1 : this.mode1 == '指定日期' ? 2 : 'error',
								start_at: this.startDate,
								end_at: this.endDate,
								show_id: this.ID1 == '是' ? 1 : 0,
							}
						}).then(res => {
							if (res.code == 1) {
								console.log(res.data)
								this.exportlink = res.data
								this.$refs.alertDialog.open()
							}
						})
					} else {
						console.log(this.range1, '15');
						console.log(this.group1);
						signExport({
							data: {
								mode: this.range1 == '当前签到' && this.group1 == '按日期分组' ? 3 : this.range1 == '当前签到' ?
									1 : this.range1 == '全部创建' ? 2 : 'error',
								code: this.code,
								type: this.mode1 == '导出全部' ? 1 : this.mode1 == '指定日期' ? 2 : 'error',
								show_id: this.ID1 == '是' ? 1 : 0,
							}
						}).then(res => {
							if (res.code == 1) {
								console.log(res.data)
								this.exportlink = res.data
								this.$refs.alertDialog.open()
							}
						})
					}

				}


			},
			timestampToTime(timestamp) {
				var date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
				var Y = date.getFullYear() + '-';
				var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
				var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
				// var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
				// var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
				// var s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
				return Y + M + D;
			},
			mode() {
				this.ismode = true
			},
			range() {
				this.isrange = true
			},
			group() {
				this.isgroup = true
			},
			id() {
				this.isID = true
			},
			mask() {
				this.ismode = false
				this.isrange = false
				this.isgroup = false
				this.isID = false
			},


		}

	}
</script>
<style lang="scss" scoped>
	.container {
		background-color: #f6f6f6;
		min-height: 100vh;

		.item {
			padding: 0 20upx;
			background-color: #fff;
			height: 83upx;
			font-size: 28upx;
			display: flex;
			align-items: center;
		}


		.dataitem {
			padding: 0 20upx;
			background-color: #fff;
			line-height: 70upx;
			font-size: 28upx;
		}



		.button {
			color: #fff;
			font-size: 34upx;
			height: 85upx;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: #1e90ff;
			width: 700upx;
			margin: 0 auto;
			margin-top: 30upx !important;
			border-radius: 10upx;
			margin-bottom: 10upx !important;
		}

		.exportBox {
			width: 100%;
			justify-content: space-around;

			.box {
				width: 340upx;
				height: 150upx;
				border-radius: 8upx;
				background-color: #fff;
				display: flex;
				justify-content: space-around;
				align-items: center;

				.text {
					display: flex;
					flex-direction: column;
					justify-content: center;

					.text1 {
						font-size: 32upx;
						font-weight: 700;
					}

					.text2 {
						font-size: 24upx;
					}

				}

				.cover {
					width: 60upx;
					height: 60upx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}
		}

		.float-box {
			z-index: 669;
			overflow: hidden;
			position: fixed;
			bottom: 0;
			width: 100%;
			border-radius: 20upx 20upx 0 0;
			font-size: 32upx;
			background-color: #eae7e8;

			.box-item {
				width: 100%;
				height: 100upx;
				line-height: 100upx;
				text-align: center;
				background-color: #fff;
			}

			.bordertop {
				border-top: 1px solid #eee;
			}

		}

		// .exporttips {
		// 	z-index: 668;
		// 	position: fixed;
		// 	background-color: #fff;
		// 	border-radius: 15upx;
		// 	box-shadow: 0 0 15upx #777;
		// 	width: 80vw;
		// 	left: 10vw;
		// 	height: 400upx;
		// 	top: 22vh;
		// 	padding: 20upx;

		// 	.title {}
		// }

		// -----组件的样式
		@mixin flex {
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			flex-direction: row;
		}

		@mixin height {
			/* #ifndef APP-NVUE */
			height: 100%;
			/* #endif */
			/* #ifdef APP-NVUE */
			flex: 1;
			/* #endif */
		}

		.box {
			@include flex;
		}

		.button {
			@include flex;
			align-items: center;
			justify-content: center;
			flex: 1;
			height: 35px;
			border-radius: 5px;
		}

		.example-body {
			background-color: #fff;
			padding: 10px 0;
		}

		.button-text {
			color: #fff;
			font-size: 12px;
		}

		.popup-content {
			@include flex;
			align-items: center;
			justify-content: center;
			padding: 15px;
			height: 50px;
			background-color: #fff;
		}

		.popup-height {
			@include height;
			width: 200px;
		}

		.text {
			font-size: 12px;
			color: #333;
		}

		.popup-success {
			color: #fff;
			background-color: #e1f3d8;
		}

		.popup-warn {
			color: #fff;
			background-color: #faecd8;
		}

		.popup-error {
			color: #fff;
			background-color: #fde2e2;
		}

		.popup-info {
			color: #fff;
			background-color: #f2f6fc;
		}

		.success-text {
			color: #09bb07;
		}

		.warn-text {
			color: #e6a23c;
		}

		.error-text {
			color: #f56c6c;
		}

		.info-text {
			color: #909399;
		}

		.dialog,
		.share {
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			flex-direction: column;
		}

		.dialog-box {
			padding: 10px;
		}

		.dialog .button,
		.share .button {
			/* #ifndef APP-NVUE */
			width: 100%;
			/* #endif */
			margin: 0;
			margin-top: 10px;
			padding: 3px 0;
			flex: 1;
		}

		.dialog-text {
			font-size: 14px;
			color: #333;
		}
	}
</style>
